<template>
  <el-skeleton
    :loading="isLoading"
    :count="count"
    animated
    style="width: 100%; text-align: center"
  >
    <template #template>
      <el-skeleton-item
        :variant="type"
        :style="{
          height: '32px',
          margin: '4px auto',
          width: width
        }"
      />
    </template>
    <template #default>
      <slot />
    </template>
  </el-skeleton>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    isLoading: boolean
    width?: string
    type: 'p' | 'text' | 'h1' | 'h3' | 'button' | 'rect'
    count: number
  }>(),
  {
    isLoading: true,
    width: '100%',
    type: 'rect',
    count: 5
  }
)
</script>
